<!--菜单3：
电表实时监控模块-->
<template>
    <div class="front-box">
        <el-row :gutter="0" class="front-chart-box">
            <LayoutLeft title="汝阳市人民医院仪表实时监测图">
                <template v-if="this.radio === 1">
                    <table border="1px" cellspacing="0" cellpadding="0" style="margin: auto"
                           v-if="tableData.length > 0">
                        <tr v-for="(row, i) in tableData">
                            <template v-for="(cell, j) in row">
                                <td>{{ cell }}</td>
                            </template>
                        </tr>
                    </table>
                    <div id="table-chart">
                    </div>
                </template>
                <template v-if="this.radio === 2">
                    <el-row>
                        <div>
                            <el-button size="mini" class="btn" plain>导出</el-button>
                        </div>
                    </el-row>
                    <el-table
                            :data="dataForm_tableData"
                            :cell-style="{textAlign:'center',padding:'0'}"
                            :default-sort = "{prop: 'date', order: 'descending'}"
                            :header-cell-style="{backgroundColor:'#F5F8FF',textAlign:'center',padding:'0'}"
                            border
                            height="100%"
                            width="100%">
                        <el-table-column
                                prop="time"
                                label="采集时间"
                                sortable
                                width="420px">
                        </el-table-column>
                        <el-table-column
                                prop="name"
                                label="参数名称"
                                sortable
                                style="text-align: center"
                                width="420px">
                        </el-table-column>
                        <el-table-column
                                prop="data"
                                label="读数"
                                sortable>
                        </el-table-column>
                    </el-table>
                </template>
            </LayoutLeft>

            <LayoutRight title="数据查询">
                <div style="flex: 1;padding: 0.3em 0.5em;">
                    显示方式 :
                    <br>
                    <el-radio-group v-model="radio">
                        <el-radio :label="1">图像</el-radio>
                        <el-radio :label="2">数据表格</el-radio>
                    </el-radio-group>
                    <br>
                    <div>
                        <br>
                        <DataList @closeBox="closeBox" @showBox="showBox"></DataList>
                        <br>
                    </div>
                    <div v-show="box_show==1">
                        是否开启实时监测 :
                        <select @change="setChange()" v-model="o_value">
                            <option o_value="否">否</option>
                            <option o_value="是">是</option>
                        </select>
                    </div>
                </div>
                <LayoutCard class="right-bottom">
                    <div @click="changePage(1)" :class="{'checked':pageId===1}">
                        <img src="../../assets/img/img1.png">
                        <span>负载趋势</span>
                    </div>
                    <div @click="changePage(2)" :class="{'checked':pageId===2}">
                        <img src="../../assets/img/img2.png">
                        <span>电压趋势</span>
                    </div>
                    <div @click="changePage(3)" :class="{'checked':pageId===3}">
                        <img src="../../assets/img/img3.png">
                        <span>电流趋势</span>
                    </div>
                    <div @click="changePage(4)" :class="{'checked':pageId===4}">
                        <img src="../../assets/img/img4.png">
                        <span>有功功率</span>
                    </div>
                    <div @click="changePage(5)" :class="{'checked':pageId===5}">
                        <img src="../../assets/img/img5.png">
                        <span>水表耗水量</span>
                    </div>
                </LayoutCard>
            </LayoutRight>
        </el-row>
    </div>
</template>
<script>

//引入dataList组件
import DataList from '../../components/ElectricityMonitor/DataList'
import {formatDate} from '../../utils/date'
import {compare} from "../../utils/compare";
import LayoutRight from "@/components/Layout/LayoutRight";
import LayoutLeft from "@/components/Layout/LayoutLeft";
import LayoutCard from "@/components/Layout/LayoutCard";
import VueTable from "@/components/vue-table";

export default {
    data() {
        return {
            test: 1,
            radio: 1,
            value: 1,
            o_value: '是',
            start_date: "",
            end_date: "",
            box_show: 1,
            pageId: 0,
            tableData: [],
            chartData: [],
            dataForm_tableData: []
        };
    },
    components: {
        VueTable,
        LayoutCard,
        LayoutLeft,
        LayoutRight,
        DataList
    },
    mounted() {
        // 初始化数据
        const chartDom = document.getElementById('table-chart');
        this.chart = this.echarts.init(chartDom);
        this.changePage(1);
    },
    updated() {
        this.updateChart();
    },
    methods: {

        updateChart() {
            const option = {
                xAxis: {
                    type: 'time',
                    min: new Date("2019/12/21"),
                    max: new Date("2021/11/21"),
                    splitNumber:12,
                },
                yAxis: {
                    type: 'value',
                    splitNumber: 20,
                    min: 0
                },
                grid: {
                    x: 40,
                    x2: 20,
                    y2: 40,
                },
                series: [{
                    data: this.chartData,
                    type: 'line'
                }]
            };
            option && this.chart.setOption(option);
            this.chart.resize();
        },
        changePage(pageId) {

            this.pageId = pageId;

            // 更新表单 测试数据  仅用于生成测试图表数据  运营时改为动态获取
            let base = + new Date(2019, 12, 21);
            const interval = 10 * 24 * 3600 * 1000;
            const data = [];
            for (let i = 0; i < 80; i++) {
                const now = new Date(base += interval);
                data.push([
                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                    Math.round(Math.random() * 20 + 10)
                ]);
            }
            this.chartData = data;
            // 测试数据结束

            if (pageId === 1) {
                this.axios.get('/api/module3/LoadTrend_dataForm').then(resp=>{
                    this.dataForm_tableData=resp.data.list;
                })
                this.axios.get('/api/module3/LoadTrend_chart').then(resp => {
                    const data = resp.data.list[0];
                    this.tableData = [
                        ['电表编号', data.id, '电表名称', data.name],
                        ['安装位置', data.location, '电表参数[Kwh]', data.data],
                        ['每日用电[Kwh]', data.day_ele, '每月用电[Kwh]', data.month_ele],
                        ['每年用电[Kwh]', data.year_ele, '通讯时间', data.time]
                    ];
                })
            } else if (pageId === 2) {
                this.axios.get('/api/module3/VoltageTrend_dataForm').then(resp=>{
                    this.dataForm_tableData=resp.data.list;
                })
                this.axios.get('/api/module3/VoltageTrend_chart').then(resp => {
                    const data = resp.data.list[0];
                    this.tableData = [
                        ['电压编号', data.id, '电压名称', data.name],
                        ['安装位置', data.location, '电压参数[Kwh]', data.data],
                        ['每日用电[Kwh]', data.day_ele, '每月用电[Kwh]', data.month_ele],
                        ['每年用电[Kwh]', data.year_ele, '通讯时间', data.time]
                    ];
                })
            } else if (pageId === 3) {
                this.axios.get('/api/module3/CurrentTrend_dataForm').then(resp=>{
                    this.dataForm_tableData=resp.data.list;
                })

                this.axios.get('/api/module3/CurrentTrend_chart').then(resp => {
                    const data = resp.data.list[0];
                    this.tableData = [
                        ['电流编号', data.id, '电流名称', data.name],
                        ['安装位置', data.location, '电流参数[Kwh]', data.data],
                        ['每日用电[Kwh]', data.day_ele, '每月用电[Kwh]', data.month_ele],
                        ['每年用电[Kwh]', data.year_ele, '通讯时间', data.time]
                    ];
                })
            } else if (pageId === 4) {
                this.axios.get('/api/module3/ActivePower_dataForm').then(resp=>{
                    this.dataForm_tableData=resp.data.list;
                })
                this.axios.get('/api/module3/ActivePower_chart').then(resp => {
                    const data = resp.data.list[0];
                    this.tableData = [
                        ['功率编号', data.id, '功率名称', data.name],
                        ['安装位置', data.location, '功率参数[Kwh]', data.data],
                        ['每日功率[Kwh]', data.day_ele, '每月功率[Kwh]', data.month_ele],
                        ['每年功率[Kwh]', data.year_ele, '通讯时间', data.time]
                    ];
                })
            } else if (pageId === 5) {
                this.axios.get('/api/module3/WaterConsumption_dataForm').then(resp=>{
                    this.dataForm_tableData=resp.data.list;
                })
                this.axios.get('/api/module3/WaterConsumption_chart').then(resp => {
                    const data = resp.data.list[0];
                    this.tableData = [
                        ['水表编号', data.id, '水表名称', data.name],
                        ['安装位置', data.location, '水流参数[Kwh]', data.data],
                        ['每日用水[Kwh]', data.day_ele, '每月用水[Kwh]', data.month_ele],
                        ['每年用水[Kwh]', data.year_ele, '通讯时间', data.time]
                    ];
                })
            } else {
                this.tableData = [];
                this.dataForm_tableData = [];
            }
        },
        closeBox() {
            this.box_show = 0;
        },
        showBox() {
            this.box_show = 1;
        },
        //    不开启实时监测，查询指定时间段的数据，利用事件委托机制
        queryDateMsg() {
            //判断所选日期是否为空
            if (!this.start_date || !this.end_date) {
                this.$message.error('日期不能为空');
            } else {
                //格式化日期
                let start_date = formatDate(this.start_date, 'yyyy-MM-dd hh:mm:ss')
                let end_date = formatDate(this.end_date, 'yyyy-MM-dd hh:mm:ss')
                //在start_date必须小于end_date的前提下
                if (!compare(start_date, end_date)) {
                    //是负载趋势且为表格的情况下
                    if (this.value == 1 && this.radio == 2) {
                        this.axios.get('/api/module4/LoadTrend_dataForm_queryMsg',{
                            params:{
                                start_date:start_date,
                                end_date:end_date
                            }
                        }).then(resp=>{
                            this.dataForm_tableData=resp.data.list;
                        })
                    }
                    //是电压趋势且为表格的情况下
                    if (this.value == 2 && this.radio == 2) {
                        this.axios.get('/api/module3/VoltageTrend_dataForm_queryMsg',{
                            params:{
                                start_date:start_date,
                                end_date:end_date
                            }
                        }).then(resp=>{
                            this.dataForm_tableData=resp.data.list;
                        })
                    }
                    //是电流趋势且为表格的情况下
                    if (this.value == 3 && this.radio == 2) {
                        this.axios.get('/api/module3/CurrentTrend_dataForm_queryMsg',{
                            params:{
                                start_date:start_date,
                                end_date:end_date
                            }
                        }).then(resp=>{
                            this.dataForm_tableData=resp.data.list;
                        })
                    }
                    //是有功功率且为表格的情况下
                    if (this.value == 4 && this.radio == 2) {
                        this.axios.get('/api/module3/ActivePower_dataForm_queryMsg',{
                            params:{
                                start_date:start_date,
                                end_date:end_date
                            }
                        }).then(resp=>{
                            this.dataForm_tableData=resp.data.list;
                        })
                    }
                    //是水表耗水量且为表格的情况下
                    if (this.value == 4 && this.radio == 2) {
                        this.axios.get('/api/module3/WaterConsumption_dataForm_queryMsg',{
                            params:{
                                start_date:start_date,
                                end_date:end_date
                            }
                        }).then(resp=>{
                            this.dataForm_tableData=resp.data.list;
                        })
                    }
                } else {
                    this.$message.error('请注意所选日期的顺序');
                }
            }
        },
    }
};
</script>
<style scoped>
#table-chart {
    flex-grow: 1;
}

.front-box {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.front-chart-box {
    padding: 0;
    margin: 0;
    height: 100%;
}

.right-bottom > div {
    padding: 0.1em 0.2em;
}

.right-bottom > div > * {
    font-size: medium;
    vertical-align: middle;
    margin-right: 0.1em;
}


.right_body select {
    width: 205px;
    height: 25px;
    margin-bottom: 10px;
}

right_body div {
    margin-top: 20px;
}

.LayoutRight {
    display: flex;
    flex-direction: column;
}

.data_list {
    width: 100%;
    height: 20em;
}

.data_list_body_list {
    width: 100%;
}
/*    按钮*/
.btn{
    width: 100px;
    height: 30px;
    background-color: #F1F5F8;
    margin-left: 30px;
    border-radius: 5px;
}

</style>
